<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="120px" class="form">
      <el-form-item label="项目类型">
        <el-radio-group v-model="definition.type" >
          <el-radio :label="1">自主研发</el-radio>
          <el-radio :label="2">分社接洽</el-radio>
          <el-radio :label="3">ERP项目</el-radio>
          <el-radio :label="4">系统运维</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="项目初始节点">
        <div class="selectNode">
          <div v-for="(item, index) in definition.projectNode" :key="index" class="nodeItem" @click="changeIndex(index)">
            <div :class="activeIndex == index?'itemText_active':'itemText'">
              {{item}}
            </div>
          </div>
        </div>
      </el-form-item>

      <div class="core-form">
        <el-form ref="form" :model="form" label-width="120px">
          <el-form-item label="项目编号" >
            <el-form :inline="true" class="demo-form-inline">
              <el-form-item>
                <el-input v-model="definition.serial" placeholder="生成，不可编辑" :readonly='true'></el-input>
              </el-form-item>
              <el-form-item>
                <el-button @click="search">获取编号</el-button>
              </el-form-item>
            </el-form>
          </el-form-item>
          <el-form-item label="项目名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="归属分社">
            <el-select v-model="definition.affiliation" >
              <el-option label="1" value="shanghai"/>
              <el-option label="2" value="beijing" />
            </el-select>
          </el-form-item>
        </el-form>

        <el-form ref="form" :model="form" label-width="120px">
          <el-form-item label="合同编号">
            <el-input v-model="definition.pact"></el-input>
          </el-form-item>
          <el-form-item label="合同编号">
            <el-radio-group v-model="definition.priority" >
              <el-radio :label="1">高</el-radio>
              <el-radio :label="2">中</el-radio>
              <el-radio :label="3">低</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="分社对接人">
            <el-select v-model="definition.moreSelect" multiple placeholder="请选择">
              <el-option
                v-for="item in definition.more"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>

      <el-form-item label="项目概述">
        <el-input v-model="form.desc" type="textarea" maxlength="500" show-word-limit :autosize="{ minRows: 3, maxRows: 4}" resize="none"/>
      </el-form-item>

      <el-form-item label="项目公告">
        <el-input v-model="form.desc" type="textarea" maxlength="500" show-word-limit :autosize="{ minRows: 5}" resize="none"/>
      </el-form-item>

      <el-form-item label="项目资料">
        <div class="datum">
          <el-form :model="definition" ref="dynamicValidateForm" class="demo-dynamic">
            <el-form-item
              v-for="(domain, index) in definition.domains"
              :key="index"
              style="marginBottom:10px"
              >
              <div class="selectGroup">
                <el-select v-model="definition.contact" >
                  <el-option label="1" value="shanghai"/>
                  <el-option label="2" value="beijing" />
                </el-select>
                <el-select v-model="definition.contact" >
                  <el-option label="1" value="shanghai"/>
                  <el-option label="2" value="beijing" />
                </el-select>
                <el-select v-model="definition.contact" >
                  <el-option label="1" value="shanghai"/>
                  <el-option label="2" value="beijing" />
                </el-select>
                <el-input placeholder="请输入内容" class="datumInput"></el-input>
                <el-button @click.prevent="removeDomain(domain)" v-show="definition.deleteDelBtn" class="deleteDelBtn">删除</el-button>
              </div>
            </el-form-item>
          </el-form>
          <el-form-item>
            <el-button @click="addDomain">添加</el-button>
          </el-form-item>
        </div>
      </el-form-item>

      <el-form-item label="项目周期">
        <el-col :span="5" style="marginLeft:10px">
          <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%;" />
        </el-col>
        <el-col :span="1" class="line">~</el-col>
        <el-col :span="5">
          <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%;" />
        </el-col>
        <el-col :span="9">
          <el-form-item label="归属部门">
            <el-select v-model="definition.department" >
              <el-option label="1" value="shanghai"/>
              <el-option label="2" value="beijing" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-form-item>

      <el-form-item label="节点周期">
        <div class="nodeCycleList">
          <el-form :model="definition" ref="dynamicValidateForm">
              <el-form-item
                v-for="(i, index) in definition.nodeCycle"
                :key="index"
              >
              <div class="nodeCycleItem">
                <el-col :span="6">
                  <el-select v-model="definition.projectNodeSelect" style="marginRight:30px">
                    <el-option label="1" value="shanghai"/>
                  </el-select>
                </el-col>
                <el-col :span="6">
                  <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date"  style="width: 100%;"/>
                </el-col>
                <el-col :span="1" class="line">~</el-col>
                <el-col :span="6">
                  <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date"  style="width: 100%;"/>
                </el-col>
              </div>
            </el-form-item>
          </el-form>
          <el-form-item>
            <el-button @click="addNodeCycle">+添加</el-button>
          </el-form-item>
        </div>
      </el-form-item>
      <el-form-item label="流转项目负责人">
        <el-input v-model="definition.responsible" placeholder="查找负责人" :readonly='true' class="searchResponsible"></el-input>
      </el-form-item>

      <el-form-item>
        <div class="buttonBox">
          <el-button type="primary" @click="onSubmit">Create</el-button>
          <el-button @click="onCancel">Cancel</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      activeIndex:0,
      definition:{
        type:1,
        serial:'',
        pact:'',
        priority:1,
        affiliation:1,
        contact:1,
        moreSelect:'请选择',
        deleteDelBtn:true,
        responsible:'',
        more:[{
          value: '选项1',
          label: 'aaaaa'
        }, {
          value: '选项2',
          label: 'bbbbb'
        },],
        domains: [{
          value:''
        }],
        nodeCycle:[{
          value:''
        }],
        department:[
          {
            name:'请选择'
          }
        ],
        projectNodeSelect:[
          {
            name:'请选择'
          }
        ],
        projectNode:['虚拟项目','正式立项','开发完结','正式交付','项目完结']
      }
    }
  },
  methods: {
    changeIndex(index){
      this.activeIndex = index
      // console.log(index)
    },
    onSubmit() {
      this.$message('submit!')
      // window.console.log(this.definition)
      this.$router.push("/createProject")
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    },
    search() {

    },
    removeDomain(item) {
      if(this.definition.domains.length > 1){
        this.deleteDelBtn = true
        var index = this.definition.domains.indexOf(item)
        if (index !== -1) {
          this.definition.domains.splice(index, 1)
        }
      }else{
        this.deleteDelBtn = false
      }
    },
    addDomain() {
      this.definition.domains.push({
        
      });
    },
    addNodeCycle() {
      this.definition.nodeCycle.push({
        value:''
      });
    },
    

  }
}
</script>

<style lang="scss" scoped>
.app-container{
  background: #f2f2f2;
}
.form{
  width: 1255px;
  padding: 5% 20% 5% 0;
  background: #ffffff;
}
.selectNode{
  display: flex;
  .nodeItem{
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    .itemText{
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      margin-right: 15px;
      padding: 0 5px 0 5px;
      border: 1px solid black;
      border-radius: 1px;
      background: #ffffff;
    }
    .itemText:before{
      content:"";
      border:14px solid black;
      border-top-color:transparent;
      border-right-color:transparent;
      border-bottom-color:transparent;
      width:0px;
      height:0px;
      position:absolute;
      right: -29px;
    }
    .itemText:after{
      content:"";
      border:14px solid #ffffff;
      border-top-color:transparent;
      border-right-color:transparent;
      border-bottom-color:transparent;
      width:0px;
      height:0px;
      position:absolute;
      right: -28px;
    }
    .itemText_active{
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      margin-right: 15px;
      padding: 0 5px 0 5px;
      border: 1px solid black;
      border-radius: 1px;
      background: #d7d7d7;
    }
    .itemText_active:before{
      content:"";
      border:14px solid black;
      border-top-color:transparent;
      border-right-color:transparent;
      border-bottom-color:transparent;
      width:0px;
      height:0px;
      position:absolute;
      right: -29px;
    }
    .itemText_active:after{
      content:"";
      border:14px solid #d7d7d7;
      border-top-color:transparent;
      border-right-color:transparent;
      border-bottom-color:transparent;
      width:0px;
      height:0px;
      position:absolute;
      right: -28px;
    }
  }
}
.line{
  text-align: center;
}
.core-form{
  // width: 80%;
  display: flex;
  // justify-content: space-between;
}
.datum{
  width: 90%;
  display: flex; 
  justify-content: space-between;
  margin: 10px;
  min-height: 100px;
}
.selectGroup{
  display: flex;
  justify-content: space-between;
}
.selectGroup .el-select{
  margin-right: 10px;
}
.datumInput{
  width: 30%;
}
.deleteDelBtn{
  margin: 0px 10px;
}
.nodeCycleList{
  display: flex;
}
.nodeCycleItem{
  margin-top: 5px;
}
.searchResponsible{
  width: 30%;
}
.buttonBox{
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>

